<template>
  <!-- 主要内容 -->
  <div class="container-fluid p-4">
    <!-- 欢迎信息 -->
    <el-row :gutter="20" class="mb-4">
      <el-col :span="24">
        <el-card shadow="hover" class="statistic-card theme-welcome">
          <div class="card-body p-4">
            <div class="d-flex align-items-center">
              <img src="/images/teacher.png" alt="用户头像" width="80" height="80"
                class="rounded-circle me-4" />
              <div>
                <h4 class="mb-1">欢迎回来，{{ user.user.name }}</h4>
                <!-- <p class="text-muted mb-0">上次登录: 2023年6月15日 14:30</p> -->
                <div class="mt-2">
                  <el-tag type="success" class="m-2">教师</el-tag>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 教学统计和数据 -->
    <el-row :gutter="20" class="mb-4">
      <el-col :span="6">
        <el-card shadow="hover" class="h-100 statistic-card theme-blue" >
          <div class="card-body text-center">
            <h6 class="text-muted mb-2">已创建课程</h6>
            <h3 class="mb-0">{{ teacherCourseCount }}</h3>
            <div class="mt-3">
              <el-tag type="success">本周 +{{ newCoursesThisWeek }} 门</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="h-100 statistic-card theme-purple">
          <div class="card-body text-center">
            <h6 class="text-muted mb-2">学生选课人数</h6>
            <h3 class="mb-0">{{ totalStudents }}</h3>
            <!-- <el-progress :percentage="studentProgress" :stroke-width="8" class="mt-3"></el-progress> -->
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="h-100 statistic-card theme-green">
          <div class="card-body text-center">
            <h6 class="text-muted mb-2">考核通过率</h6>
            <h3 class="mb-0">{{ passRate }}%</h3>
            <div class="mt-3">
              <el-tag type="info" v-if="passRate>60">良好</el-tag>
              <el-tag type="info" v-else>较差</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="h-100 statistic-card theme-orange">
          <div class="card-body text-center">
            <h6 class="text-muted mb-2">待批改考核</h6>
            <h3 class="mb-0">{{ pendingAssignments }}</h3>
            <div class="mt-3">
              <el-tag type="warning" v-if="pendingAssignments > 0">需要处理</el-tag>
              <el-tag type="success" v-else>全部已批改</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 我的课程 -->
    <el-row :gutter="20" class="mb-4">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="d-flex justify-content-between align-items-center">
              <h5 class="mb-0">我的课程</h5>
              <el-button type="primary" size="small" @click="createNewCourse">
                <i class="bi bi-plus-circle me-1"></i>创建课程
              </el-button>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :span="12" v-for="course in teacherCourses" :key="course.course.id" class="mb-3">
              <div class="d-flex">
                <img class="rounded me-3" alt="课程缩略图"
                  :src="course.course.coverUrl || 'https://placeholder.pics/svg/100x60/DEDEDE/555555/课程'"
                  style="width: 100px; height: 60px; object-fit: cover;" />
                <div style="flex: 1;">
                  <div class="d-flex justify-content-between">
                    <h6 class="mb-1">{{ course.course.title }}</h6>
                    <div>
                      <el-tag size="small" type="info" v-if="course.course.status === 0">草稿</el-tag>
                      <el-tag size="small" type="success" v-else-if="course.course.status === 1">已发布</el-tag>
                      <el-tag size="small" type="danger" v-else>已下架</el-tag>
                    </div>
                  </div>
                  <p class="text-muted small mb-2">
                    选课人数: {{ course.selectNumber || 0 }} | 难度: {{ getDifficultyText(course.course.difficulty) }}
                  </p>
                  <div class="d-flex">
                    <el-button type="primary" size="small" @click="editCourse(course.course.id)" class="me-2">
                      <i class="bi bi-pencil me-1"></i>编辑
                    </el-button>
                    <el-button type="info" size="small" @click="viewCourseDetail(course.course.id)">
                      <i class="bi bi-eye me-1"></i>查看
                    </el-button>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="24" v-if="teacherCourses.length === 0">
              <div class="text-center p-4">
                <i class="bi bi-journal-x" style="font-size: 2rem;"></i>
                <p class="mt-2">您还没有创建任何课程</p>
                <el-button type="primary" @click="createNewCourse">立即创建课程</el-button>
              </div>
            </el-col>
          </el-row>
          <template #footer>
            <div class="text-center">
              <el-link type="primary" :underline="false" href="/teacher/teacher-course">管理全部课程
              </el-link>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-row>

    <!-- 近期考核和培训计划 -->
    <el-row :gutter="20">
      <el-col :span="24" class="mb-4">
        <el-card shadow="hover" class="h-100">
          <template #header>
            <div class="d-flex justify-content-between align-items-center">
              <h5 class="mb-0">近期考核</h5>
              <el-button type="primary" size="small" @click="createNewExam">
                <i class="bi bi-plus-circle me-1"></i>创建考核
              </el-button>
            </div>
          </template>
          <el-timeline v-if="sortedTeacherExams.length > 0">
            <el-timeline-item v-for="exam in sortedTeacherExams" :key="exam.exam.id">
              <h6 class="mb-1">{{ exam.exam.title }}</h6>
              <p class="text-muted small mb-0">
                时间: {{ formatDate(exam.exam.startTime) }} - {{ formatDate(exam.exam.endTime) }}
              </p>
              <div class="mt-1">
                <el-tag type="warning" v-if="isExamUpcoming(exam.exam)">即将开始</el-tag>
                <el-tag type="success" v-else-if="isExamInProgress(exam.exam)">进行中</el-tag>
                <el-tag type="info" v-else-if="isExamCompleted(exam.exam)">已结束</el-tag>
                <el-tag type="danger" v-else>未开始</el-tag>
              </div>
              <div class="mt-2">
                <el-button type="primary" size="small" @click="manageExam(exam.exam.id)" class="me-2">
                  管理
                </el-button>
                <el-button type="info" size="small" @click="navigateToSubmissions(exam.exam.id)">
                  阅卷
                </el-button>
              </div>
            </el-timeline-item>
          </el-timeline>
          <div v-else class="text-center p-4">
            <i class="bi bi-clipboard-x" style="font-size: 2rem;"></i>
            <p class="mt-2">您还没有创建任何考核</p>
            <el-button type="primary" @click="createNewExam">立即创建考核</el-button>
          </div>
          <template #footer>
            <div class="text-center">
              <el-link type="primary" :underline="false" href="/teacher/teacher-assessment">管理全部考核
              </el-link>
            </div>
          </template>
        </el-card>
      </el-col>
      <!-- <el-col :span="12" class="mb-4">
        <el-card shadow="hover" class="h-100">
          <template #header>
            <div class="d-flex justify-content-between align-items-center">
              <h5 class="mb-0">培训计划</h5>
              <el-button type="primary" size="small" @click="createNewPlan">
                <i class="bi bi-plus-circle me-1"></i>创建计划
              </el-button>
            </div>
          </template>
          <div v-if="trainingPlans.length > 0">
            <div v-for="plan in trainingPlans" :key="plan.id" class="mb-4">
              <h6>{{ plan.title }}</h6>
              <p class="text-muted small mb-2">{{ formatDate(plan.startDate) }} - {{ formatDate(plan.endDate) }}</p>
              <el-progress :percentage="calculatePlanProgress(plan)" :stroke-width="8"></el-progress>
              <div class="d-flex justify-content-between mt-1">
                <small class="text-muted">分类: {{ plan.category }}</small>
                <small class="text-muted">{{ calculatePlanProgress(plan) }}%</small>
              </div>
              <div class="mt-2">
                <el-button type="primary" size="small" @click="managePlan(plan.id)" class="me-2">
                  管理
                </el-button>
                <el-button type="info" size="small" @click="viewPlanDetail(plan.id)">
                  查看详情
                </el-button>
              </div>
            </div>
          </div>
          <div v-else class="text-center p-4">
            <i class="bi bi-calendar-x" style="font-size: 2rem;"></i>
            <p class="mt-2">您还没有创建任何培训计划</p>
            <el-button type="primary" @click="createNewPlan">立即创建培训计划</el-button>
          </div>
          <template #footer>
            <div class="text-center">
              <el-link type="primary" :underline="false" href="/teacher/training-plan-management">管理全部培训计划
              </el-link>
            </div>
          </template>
        </el-card>
      </el-col> -->
    </el-row>
    <!-- ... </div> 闭合标签之前 ... -->
    <!-- <NewAssessmentModal v-model="modalController.popups.newAssessmentModal" :exam-data="examToEdit"
      @refresh="loadTeacherExams" />
    <AddCourseModal v-model="modalController.popups.addCourseModal" @refresh="loadTeacherCourses" />
    <EditCourseModal v-model="modalController.popups.editCourseModal" @refresh="loadTeacherCourses" /> -->
    <NewAssessmentModal v-model="modalController.popups.newAssessmentModal" :exam-data="examToEdit" />
    <AddCourseModal v-model="modalController.popups.addCourseModal" />
    <EditCourseModal v-model="modalController.popups.editCourseModal" />
  </div>
</template>

<script setup>
import "@/assets/css/dashboard-bootstrap.css";
import "@/assets/css/style.css";
import "bootstrap-icons/font/bootstrap-icons.css";
import { modalControllers } from "@/stores/modalController.js";
import NewAssessmentModal from "@/components/alert/teacher/NewAssessmentModal.vue"; // 确保路径正确
import { useUserStore } from "@/stores/user.js";
import { useExamStore } from "@/stores/exam.js";
import { usePlanStores } from "@/stores/training-plan.js";
import { useCourseStore } from "@/stores/course.js";
import { ref, computed, onMounted, watch } from "vue";
import router from "@/router/index.js";
import { ElMessage } from "element-plus";
import { storeToRefs } from 'pinia'; // 新增
import dayjs from 'dayjs';
import AddCourseModal from "@/components/alert/admin/AddCourseModal.vue"; // 确保路径正确
import EditCourseModal from "@/components/alert/teacher/EditCourseModal.vue"; // 确保路径正确
const newCoursesThisWeek = ref(0); // 用于存储本周新增课程数
// 初始化存储
const user = useUserStore();
const examStore = useExamStore();
const courseStore = useCourseStore();
const planStore = usePlanStores();
const modalController = modalControllers();
const examToEdit = ref(null); // 用于存放要编辑的考核数据
const { teacherExams } = storeToRefs(examStore); // 从 examStore 中解构出教师的考核列表
// 统计数据
const teacherCourseCount = ref(0);
const totalStudents = ref(0);
const passRate = ref(0); // 修改：初始值设为0，等待计算
const pendingAssignments = ref(0); // 修改：初始值设为0，等待计算
const studentProgress = computed(() => {
  return Math.min(Math.round((totalStudents.value / 100) * 100), 100);
});
const timelineAssessments = computed(() => {
  // 1. 合并已完成和未完成的考核，并为已完成的考核添加 isCompleted 标记
  const completed = (historyAssessments.value || []).map(item => ({ ...item, isCompleted: true }));
  const uncompleted = (uncompletedExams.value || []).map(item => ({ ...item, isCompleted: false }));

  const allAssessments = [...completed, ...uncompleted];

  // 2. 筛选掉状态为 'draft' (草稿) 或 'ended' (已结束) 的考核
  const filtered = allAssessments.filter(item => {
    const status = item.exam.status;
    return status !== 'draft' && status !== 'ended';
  });

  // 3. 按开始时间升序排序
  return filtered.sort((a, b) => new Date(a.exam.startTime) - new Date(b.exam.startTime));
});

watch(
  () => modalController.popups.addCourseModal,
  (newValue, oldValue) => {
    // 当“新增课程”弹窗从“打开”变为“关闭”时
    if (oldValue === true && newValue === false) {
      loadTeacherCourses(); // 重新加载课程列表
    }
  }
);

watch(
  () => modalController.popups.editCourseModal,
  (newValue, oldValue) => {
    // 当“编辑课程”弹窗从“打开”变为“关闭”时
    if (oldValue === true && newValue === false) {
      loadTeacherCourses(); // 重新加载课程列表
    }
  }
);

watch(
  () => modalController.popups.newAssessmentModal,
  (newValue, oldValue) => {
    // 当“创建/编辑考核”弹窗从“打开”变为“关闭”时
    if (oldValue === true && newValue === false) {
      loadTeacherExams(); // 重新加载考核列表
    }
  }
);

// 课程数据
const teacherCourses = ref([]);

// 考核数据
// const teacherExams = ref([]);

// 培训计划数据
const trainingPlans = ref([]);
// 新增：计算并设置通过率的函数
// const calculateAndSetPassRate = () => {
//   // 1. 确保教师的考核列表已加载
//   if (!teacherExams.value || teacherExams.value.length === 0) {
//     passRate.value = 0;
//     return;
//   }

//   const teacherExamIds = new Set(teacherExams.value.map(e => e.exam.id));

//   if (teacherExamIds.size === 0) {
//     passRate.value = 0;
//     return;
//   }

//   // 2. 获取所有学生的答卷
//   examStore.fetchAllSubmissions((allSubmissions) => {
//     // 3. 筛选出属于该教师的、且已完成的答卷
//     const relevantSubmissions = allSubmissions.filter(sub =>
//       teacherExamIds.has(sub.examSubmission.examId) &&
//       sub.examSubmission.gradingStatus === 'completed'
//     );

//     if (relevantSubmissions.length === 0) {
//       passRate.value = 0;
//       return;
//     }

//     // 4. 在筛选出的答卷中，计算通过的数量
//     const passedCount = relevantSubmissions.filter(sub =>
//       sub.examSubmission.totalScore >= 60
//     ).length;

//     // 5. 计算通过率并更新 ref
//     const rate = (passedCount / relevantSubmissions.length) * 100;
//     passRate.value = rate.toFixed(1); // 保留一位小数
//   });
// };

// 修改：重命名函数，并整合两个统计的计算逻辑
const calculateExamStats = () => {
  if (!teacherExams.value || teacherExams.value.length === 0) {
    passRate.value = 0;
    pendingAssignments.value = 0;
    return;
  }

  const teacherExamIds = new Set(teacherExams.value.map(e => e.exam.id));

  if (teacherExamIds.size === 0) {
    passRate.value = 0;
    pendingAssignments.value = 0;
    return;
  }

  examStore.fetchAllSubmissions((allSubmissions) => {
    // 1. 先筛选出所有属于该教师的答卷
    const allTeacherSubmissions = allSubmissions.filter(sub =>
      teacherExamIds.has(sub.examSubmission.examId)
    );

    // 2. 从中计算待批改的数量
    pendingAssignments.value = allTeacherSubmissions.filter(sub =>
      sub.examSubmission.gradingStatus === 'pending'
    ).length;

    // 3. 从中筛选出已完成的，用于计算通过率
    const completedSubmissions = allTeacherSubmissions.filter(sub =>
      sub.examSubmission.gradingStatus === 'completed'
    );

    if (completedSubmissions.length === 0) {
      passRate.value = 0;
    } else {
      const passedCount = completedSubmissions.filter(sub =>
        sub.examSubmission.totalScore >= 60
      ).length;
      const rate = (passedCount / completedSubmissions.length) * 100;
      passRate.value = rate.toFixed(1);
    }
  });
};

// 初始化数据
onMounted(async () => {
  // 加载教师课程
  await loadTeacherCourses();

  // 加载考核数据
  await loadTeacherExams();

  // 加载培训计划
  await loadTrainingPlans();
});

// 加载教师课程
// async function loadTeacherCourses() {
//   try {
//     user.selectTeacherCourse(user.user.id);
//     // 等待数据加载完成
//     setTimeout(() => {
//       teacherCourses.value = user.teacher_myCourse || [];
//       teacherCourseCount.value = teacherCourses.value.length;

//       // 计算选课总人数
//       totalStudents.value = teacherCourses.value.reduce((sum, course) => {
//         return sum + (course.selectNumber || 0);
//       }, 0);
//     }, 500);
//   } catch (error) {
//     console.error("加载教师课程失败:", error);
//     ElMessage.error("加载课程数据失败");
//   }
// }
// async function loadTeacherCourses() {
//   try {
//     user.selectTeacherCourse(user.user.id);
//     // 等待数据加载完成
//     setTimeout(() => {
//       const courses = user.teacher_myCourse || [];
//       teacherCourses.value = courses;
//       teacherCourseCount.value = courses.length;

//       // 计算选课总人数
//       totalStudents.value = courses.reduce((sum, course) => {
//         return sum + (course.selectNumber || 0);
//       }, 0);

//       // --- 新增逻辑：计算本周新增课程数 ---
//       const oneWeekAgo = dayjs().subtract(7, 'day');
//       const count = courses.filter(c => {
//         // 确保 createTime 存在且有效
//         return c.course && c.course.createTime && dayjs(c.course.createTime).isAfter(oneWeekAgo);
//       }).length;
//       newCoursesThisWeek.value = count;
//       // --- 新增逻辑结束 ---

//     }, 500);
//   } catch (error) {
//     console.error("加载教师课程失败:", error);
//     ElMessage.error("加载课程数据失败");
//   }
// }

async function loadTeacherCourses() {
  try {
    // 确保当前登录的用户ID存在
    const currentUserId = user.user?.id;
    if (!currentUserId) {
      ElMessage.warning("无法获取当前教师ID，请重新登录。");
      return;
    }

    // 调用 course.js 中的新方法，并等待其完成
    const courses = await courseStore.fetchCoursesByTeacher(currentUserId);

    // --- 数据获取成功后，再进行所有后续计算 ---
    teacherCourses.value = courses;
    teacherCourseCount.value = courses.length;

    // 计算选课总人数
    totalStudents.value = courses.reduce((sum, courseItem) => {
      return sum + (courseItem.selectNumber || 0);
    }, 0);

    // 计算本周新增课程数
    const oneWeekAgo = dayjs().subtract(7, 'day');
    const count = courses.filter(c => {
      // API返回的数据中，创建时间字段为 course.createdAt
      return c.course && c.course.createdAt && dayjs(c.course.createdAt).isAfter(oneWeekAgo);
    }).length;
    newCoursesThisWeek.value = count;

  } catch (error) {
    // Promise 被 reject 时会进入 catch 块
    console.error("加载教师课程失败:", error);
    // 具体的错误信息已在 store action 中通过 ElMessage 提示，这里可以不再重复提示
  }
}

// 加载教师考核
// async function loadTeacherExams() {
//   try {
//     user.selectTeacherExam(user.user.name);
//     // 等待数据加载完成
//     setTimeout(() => {
//       teacherExams.value = user.teacher_myExam || [];
//     }, 500);
//   } catch (error) {
//     console.error("加载教师考核失败:", error);
//     ElMessage.error("加载考核数据失败");
//   }
// }
async function loadTeacherExams() {
  try {
    // 调用 examStore 的 action 来获取数据
    examStore.fetchCurrentTeacherExams((data, total) => {
      // 成功获取到数据后，立即调用通过率计算函数
      // teacherExams 的状态会通过 storeToRefs 自动更新，无需手动赋值
      calculateExamStats();
    });
  } catch (error) {
    console.error("加载教师考核失败:", error);
    ElMessage.error("加载考核数据失败");
  }
}

// 加载培训计划
async function loadTrainingPlans() {
  try {
    planStore.getMyPlanning(user.user.id);
    // 等待数据加载完成
    setTimeout(() => {
      trainingPlans.value = planStore.plans || [];
    }, 500);
  } catch (error) {
    console.error("加载培训计划失败:", error);
    ElMessage.error("加载培训计划数据失败");
  }
}

// 获取难度文本
function getDifficultyText(difficulty) {
  const difficultyMap = {
    0: "初级",
    1: "中级",
    2: "高级"
  };
  return difficultyMap[difficulty] || "未知";
}

// 格式化日期
function formatDate(dateString) {
  if (!dateString) return "未设置";
  const date = new Date(dateString);
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
}

// 判断考核状态
function isExamUpcoming(exam) {
  const now = new Date();
  const startTime = new Date(exam.startTime);
  const endTime = new Date(exam.endTime);
  return startTime > now && startTime - now < 7 * 24 * 60 * 60 * 1000; // 一周内开始
}

function isExamInProgress(exam) {
  const now = new Date();
  const startTime = new Date(exam.startTime);
  const endTime = new Date(exam.endTime);
  return startTime <= now && now <= endTime;
}

function isExamCompleted(exam) {
  const now = new Date();
  const endTime = new Date(exam.endTime);
  return now > endTime;
}

// 计算培训计划进度
function calculatePlanProgress(plan) {
  const now = new Date();
  const startDate = new Date(plan.startDate);
  const endDate = new Date(plan.endDate);

  if (now < startDate) return 0;
  if (now > endDate) return 100;

  const totalDuration = endDate - startDate;
  const elapsedDuration = now - startDate;

  return Math.round((elapsedDuration / totalDuration) * 100);
}

// 路由导航函数
function createNewCourse() {
  modalController.openPopup('addCourseModal');
}

// async function editCourse(courseId) {
//   // 调用 userStore 中已有的方法来设置当前要编辑的课程
//   await user.changeEditedCourse(courseId);
//   // 打开编辑弹窗
//   modalController.openPopup('editCourseModal');
// }
async function editCourse(courseId) {
  // 从本地的 teacherCourses 列表中查找完整的课程对象
  const courseToEdit = teacherCourses.value.find(item => item.course.id === courseId);

  // 确保找到了课程
  if (courseToEdit) {
    // 将找到的完整对象传递给 store action
    await user.changeEditedCourse(courseId);
    // 打开弹窗
    modalController.openPopup('editCourseModal');
  } else {
    ElMessage.error('无法找到课程数据，编辑失败。');
    console.error(`ID为 ${courseId} 的课程未在列表中找到。`);
  }
}

function viewCourseDetail(courseId) {
  router.push(`/course/${courseId}`);
}

function createNewExam() {
  examToEdit.value = null; // 清空编辑数据，确保是“创建”模式
  modalController.openPopup('newAssessmentModal');
}

function manageExam(examId) {
  // 从已加载的考核列表中找到对应的考核数据
  const examData = teacherExams.value.find(e => e.exam.id === examId);
  if (examData) {
    // 将找到的数据赋给 examToEdit，用于传递给弹窗
    // NewAssessmentModal 需要一个包含 courseName 的完整对象，我们先传递已有的数据
    // 弹窗内部的 watch 会处理后续逻辑
    examToEdit.value = examData.exam;
    modalController.openPopup('newAssessmentModal');
  } else {
    ElMessage.error('未能找到该考核的详细信息');
  }
}
const sortedTeacherExams = computed(() => {
  // 确保 teacherExams 是一个数组
  if (!teacherExams.value || !Array.isArray(teacherExams.value)) {
    return [];
  }
  // 创建一个数组副本进行排序，以避免直接修改 store 中的状态
  return [...teacherExams.value].sort((a, b) => {
    // 按 exam.startTime 降序排列 (最新的在前面)
    return new Date(b.exam.startTime) - new Date(a.exam.startTime);
  });
});
function navigateToSubmissions(examId) {
  if (!examId) {
    ElMessage.error("无效的考核ID");
    return;
  }
  // 跳转到该考核的答卷列表页面
  router.push(`/exam/${examId}/submissions`);
}

function createNewPlan() {
  router.push("/teacher/create-training-plan");
}

function managePlan(planId) {
  router.push(`/teacher/manage-training-plan/${planId}`);
}

function viewPlanDetail(planId) {
  router.push(`/teacher/training-plan/${planId}`);
}
</script>

<!-- <style scoped>
/* 自定义样式 */
.wrapper {
  display: flex;
}

.el-header {
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.el-badge {
  line-height: 1;
}

.el-card {
  border: none;
}

.el-card__header {
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
  box-sizing: border-box;
}

.el-card__body {
  padding: 20px;
}

.el-card__footer {
  padding: 18px 20px;
  border-top: 1px solid #ebeef5;
  box-sizing: border-box;
}

.el-timeline {
  padding-left: 0;
}

.el-timeline-item__content {
  padding-bottom: 20px;
}

.el-timeline-item:last-child .el-timeline-item__content {
  padding-bottom: 0;
}

.text-muted {
  color: #6c757d !important;
}

.small {
  font-size: 0.875em !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

.me-3 {
  margin-right: 1rem !important;
}

.me-4 {
  margin-right: 1.5rem !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.d-flex {
  display: flex !important;
}

.align-items-center {
  align-items: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.text-center {
  text-align: center !important;
}

.h-100 {
  height: 100% !important;
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.border-bottom {
  border-bottom: 1px solid #dee2e6 !important;
}

.bg-light {
  background-color: #f8f9fa !important;
}

.bg-white {
  background-color: #fff !important;
}

.text-decoration-none {
  text-decoration: none !important;
}

.container-fluid {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row>* {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

@media (min-width: 768px) {
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
}

.d-none {
  display: none !important;
}

@media (min-width: 768px) {
  .d-md-block {
    display: block !important;
  }
}

.ms-auto {
  margin-left: auto !important;
}

.ms-3 {
  margin-left: 1rem !important;
}

.rounded {
  border-radius: 0.375rem !important;
}

.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style> -->

<style scoped>
/* 引入项目通用的 Bootstrap 风格工具类 */
@import "@/assets/css/dashboard-bootstrap.css";

/* --- 核心修改：为卡片添加阴影和悬浮效果 --- */
.statistic-card {
  position: relative; /* 关键：为伪元素定位提供上下文 */
  overflow: hidden;   /* 关键：隐藏初始状态的伪元素 */
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 卡片内容层，确保它在动画背景之上 */
.statistic-card :deep(.el-card__body) {
  position: relative;
  z-index: 2;
  transition: color 0.4s ease-out; /* 文字颜色变化的动画 */
}

/* 默认状态下文字颜色 */
.statistic-card h3,
.statistic-card h6 {
  transition: color 0.4s ease-out;
}

/* 创建一个初始状态为0x0的圆形伪元素，并将其置于中心 */
.statistic-card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: var(--card-theme-gradient); /* 使用CSS变量来定义渐变 */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s ease-in-out;
  z-index: 1; /* 在内容之下 */
}

/* --- 悬浮效果 --- */
.statistic-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

/* 悬浮时，将伪元素放大到足以覆盖整个卡片 */
.statistic-card:hover::before {
  width: 300%;  /* 一个足够大的尺寸来覆盖卡片 */
  height: 300%;
}
.theme-welcome {
  /* 一个柔和且专业的天蓝色渐变 */
  --card-theme-gradient: linear-gradient(135deg, #89cff0 0%, #4682b4 100%);
}

/* --- 新增：确保欢迎卡片内的图标颜色在悬浮时也变为白色 --- */
.statistic-card:hover .d-flex i {
  color: #fff !important;
}
/* 悬浮时，改变文字颜色为白色 */
.statistic-card:hover h3,
.statistic-card:hover h6 {
  color: #fff !important;
}

/* --- 定义不同的颜色主题 --- */

.theme-blue {
  --card-theme-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.theme-purple {
  --card-theme-gradient: linear-gradient(135deg, #8A2BE2 0%, #C71585 100%);
}

.theme-green {
  --card-theme-gradient: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.theme-orange {
  --card-theme-gradient: linear-gradient(135deg, #fd7e14 0%, #ffc107 100%);
}
/* 为页面内所有卡片设置基础样式和过渡动画 */
.el-row .el-col .el-card {
  border-radius: 0.5rem; /* 更圆润的圆角 */
  border: 1px solid #f0f2f5;
  transition: all 0.3s ease-in-out; /* 为 transform 和 box-shadow 添加平滑过渡 */
  /* 设置一个更柔和的初始阴影 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* 鼠标悬浮时，卡片上浮并加深阴影 */
.el-row .el-col .el-card:hover {
  transform: translateY(-5px); /* 向上移动5像素，产生“浮起”效果 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 阴影变得更深、更弥散 */
}

/* 欢迎卡片的特殊样式 */
.el-card:first-child {
  border-left: 4px solid #4e73df; /* 左侧添加主题色边框 */
}

/* 统计卡片样式 */
.h-100 .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 统一卡片头部样式 */
:deep(.el-card__header) {
    background-color: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
}

:deep(.el-card__header h5) {
    font-weight: 600;
    color: #5a5c69;
}

/* 课程列表项样式 */
.course-card-body {
    padding: 20px;
}
.course-card-footer {
    padding: 20px;
    border-top: 1px solid #ebeef5;
    text-align: right;
}
</style>